<template>
  <div class="login-form">
    <div class="head">
      <p :class="{active: !tabIndex}"
         @click="tabIndex = 0">
        账户登录
      </p>
      <p :class="{active: tabIndex}"
         @click="tabIndex = 1">
        扫码登录
      </p>
    </div>
    <div class="body">
      <!-- 登录表单 -->
      <login-form-body v-show="!tabIndex"/>
      <!-- 扫码 -->
      <div v-show="tabIndex"
           class="code">
        <img src="/images/qrcode.jpg"/>
        <p>
          打开
          <router-link to="">小兔鲜App</router-link>
          扫码登录
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import LoginFormBody from '@/components/library/LoginFormBody.vue'
import {ref} from 'vue'

let tabIndex = ref<number>(0)

</script>

<style lang="less"
       scoped>
.login-form {
  width: 380px;
  min-height: 400px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

  .head {
    display: flex;
    justify-content: space-between;
    height: 55px;
    align-items: center;
    padding: 0 30px;
    font-size: 18px;
    color: #333333;
    border-bottom: 1px solid #f5f5f5;

    p {
      width: 190px;
      cursor: pointer;

      &.active {
        font-weight: bolder;
        color: @xtxColor;
      }

      &:nth-of-type(2) {
        border-left: 1px solid #f5f5f5;
        text-align: right;
      }
    }
  }

  .body {
    flex: 1;

    .code {
      display: flex;
      flex-direction: column;
      height: 320px;
      align-items: center;
      justify-content: center;

      p {
        margin-top: 10px;
        text-align: center;

        a {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>